﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>步骤控制</title>
    <!-- Jquery -->
    <script type="text/javascript" src="/jquery/1.12.4/jquery.min.js"></script>
    <!-- xhui -->
    <link rel="stylesheet" href="/xhui/css/xhui.css?v=1.003">
    <script type="text/javascript" src="/xhui/js/xhui.js?v=1.014"></script>

    <style type="text/css">
		body { background-color:#f3f4f5;}
		.testBox { width:100%; height:400px; overflow:hidden;}
    </style>
</head>

<body>
    <div class="testBox">
        <a href="javascript:void(0)" id="HrefOpenDrawer">打开抽屉</a>、
        <a href="javascript:void(0)" id="HrefCloseDrawer">关闭抽屉</a>

    </div>

    <div class="xhDrawer" id="myDrawer">
        <div class="xhDrawerBrace">
            <div style="width:100%; height:300px; overflow:hidden; background-color:#f00;"></div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var myDrawer = xhDrawer("#myDrawer", {
                width: 500,
            });

            $("#HrefOpenDrawer").click(function () {
                myDrawer.open();
            });

            $("#HrefCloseDrawer").click(function () {
                myDrawer.close();
			});
        });
    </script>
</body>
</html>